<!DOCTYPE html>
<html lang="cn" style="width:100%;height:100%">
<head>
    <meta charset="UTF-8">
    <title>后端之家</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="image/favicon.ico">
    <link rel="stylesheet" href="library/layui/css/layui.css" media="all">
    <style>
        .login-body {
            top: 50%;
            left: 50%;
            position: absolute;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            overflow: hidden;
        }

        .login-main .login-bottom .login-center .login-item input {
            display: inline-block;
            width: 135px;
            height: 22px;
            padding: 0;
            position: absolute;
            border: 0;
            outline: 0;
            font-size: 14px;
            letter-spacing: 0;
        }

        .login-main .login-bottom .login-center .login-item .login-icon1 {
            background: url(image/loginicon.png) no-repeat 0 0;
        }

        .login-main .login-bottom .login-center .login-item .login-icon2 {
            background: url(image/loginicon.png) no-repeat -54px 0;
        }

        .login-main .login-bottom .login-center .login-item .login-icon3 {
            background: url(image/loginicon.png) no-repeat -106px 0;
        }

        .login-main .login-bottom .login-center .login-item .login-icon4 {
            background: url(image/loginicon.png) no-repeat 0 -43px;
            position: absolute;
            right: -10px;
            cursor: pointer;
        }

        .login-main .login-bottom .login-center .login-item .login-icon5 {
            background: url(image/loginicon.png) no-repeat -55px -43px;
        }

        .login-main .login-bottom .login-center .login-item .login-icon {
            display: inline-block;
            width: 33px;
            height: 22px;
        }

        .login-main .login-bottom .login-center .login-item {
            width: 288px;
            height: 35px;
            border-bottom: 1px solid #dae1e6;
            margin-bottom: 35px;
        }

        .login-main {
            width: 428px;
            position: relative;
            float: left;
        }

        .login-main .login-top {
            height: 117px;
            background-color: #148be4;
            border-radius: 12px 12px 0 0;
            font-size: 30px;
            font-weight: 400;
            font-stretch: normal;
            letter-spacing: 0;
            color: #fff;
            line-height: 117px;
            text-align: center;
            overflow: hidden;
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
        }

        .login-main .login-top .login-bg1 {
            display: inline-block;
            width: 74px;
            height: 74px;
            background: #fff;
            opacity: .1;
            border-radius: 0 74px 0 0;
            position: absolute;
            left: 0;
            top: 43px;
        }

        .login-main .login-top .login-bg2 {
            display: inline-block;
            width: 94px;
            height: 94px;
            background: #fff;
            opacity: .1;
            border-radius: 50%;
            position: absolute;
            right: -16px;
            top: -16px;
        }

        .login-main .login-bottom {
            width: 428px;
            background: #fff;
            border-radius: 0 0 12px 12px;
            padding-bottom: 53px;
        }

        .login-main .login-bottom .login-center {
            width: 288px;
            margin: 0 auto;
            padding-top: 40px;
            padding-bottom: 15px;
            position: relative;
        }

        .login-container {
            background-image: url(image/loginback.jpg);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            position: static;
            font-size: 12px;
            height: 100%;
            width: 100%;
        }

        .login-center div input:-webkit-autofill {
            /* 取消Chrome记住密码的背景颜色 */
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
        }

        .login-main .login-bottom .login-btn {
            width: 288px;
            height: 40px;
            background-color: #1E9FFF;
            border-radius: 16px;
            margin: 24px auto 0;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 14px;
            letter-spacing: 0;
            cursor: pointer;
            border: none;
        }

        #login-captcha-img {
            position: absolute;
            right: 1px;
            cursor: pointer;
            height: 36px;
            border: 1px solid #e6e6e6;
        }

        .login-footer {
            left: 0;
            bottom: 0;
            color: #fff;
            width: 100%;
            position: absolute;
            text-align: center;
            line-height: 30px;
            padding-bottom: 10px;
            text-shadow: #000 0.1em 0.1em 0.1em;
            font-size: 14px;
        }

        .login-footer a,
        .login-footer span {
            color: #fff;
        }

        @media screen and (max-width: 428px) {
            .login-main {
                width: 360px !important;
            }

            .login-main .login-top {
                width: 360px !important;
            }

            .login-main .login-bottom {
                width: 360px !important;
            }
        }
    </style>
</head>
<body style="width:100%;height:100%">
<div class="login-container">
    <div class="login-body">
        <div class="login-main">
            <div class="login-top">
                <span>用户登录</span>
                <span class="login-bg1"></span>
                <span class="login-bg2"></span>
            </div>
            <form class="layui-form login-bottom">
                <div class="login-center">
                    <div class="login-item">
                        <span class="login-icon login-icon2"></span>
                        <input type="text" value="元宝" name="login_name" lay-verify="required" placeholder="请输入登录账号"/>
                    </div>

                    <div class="login-item">
                        <span class="login-icon login-icon3"></span>
                        <input type="password" value="yb" name="login_password" lay-verify="required"
                               placeholder="请输入密码"/>
                        <span class="bind-password login-icon login-icon4"></span>
                    </div>

                    <input type="text" name="login_captcha_encode" hidden/>
                    <div class="login-item" style="width:160px">
                        <span class="login-icon login-icon1"></span>
                        <input type="number" name="login_captcha_code" lay-verify="required" placeholder="请输入验证码"/>
                        <img id="login-captcha-img" src="" alt=""/>
                    </div>
                </div>
                <div class="layui-form-item" style="text-align:center;margin:0">
                    <button class="login-btn" lay-submit lay-filter="login">立即登录</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="login-footer"></div>

<script src="library/layui/layui.js" charset="utf-8"></script>
<script src="library/jquery/jquery.js" charset="utf-8"></script>
<script src="library/scripts/md5.js" charset="utf-8"></script>
<script src="admin/common.js" charset="utf-8"></script>
<script>
    $(function () {
        function refreshCaptcha() {
            $.get('../api/captcha', {}, function (data) {
                $("input[name='login_captcha_code']").val("");
                $("input[name='login_captcha_encode']").val(data.data && data.data.encode);
                $('#login-captcha-img').attr('src', data.data && data.data.image);
            });
        }

        function bindPassword() {
            if ($(this).hasClass('login-icon5')) {
                $(this).removeClass('login-icon5');
                $("input[name='login_password']").attr('type', 'password');
            } else {
                $(this).addClass('login-icon5');
                $("input[name='login_password']").attr('type', 'text');
            }
        }

        function submitLogin(data) {
            data = data && data.field || {};
            // 密码混淆加强
            data.login_password = md5(md5((data.login_password || "").repeat(8)) + data.login_captcha_code);
            $.ajax({
                url: "../api/auth",
                method: "post",
                data: data,
                dataType: "json",
                success: function (result) {
                    if (result && result.status < 400) {
                        // 登录完成清除控件密码
                        $("input[name='login_password']").val("");
                        if (location.pathname.endsWith("login.html")) {
                            window.location.href = "index.html"
                        } else {
                            if (window.loginIndex) layui.layer.close(window.loginIndex);
                            if (updateLoginInfo) updateLoginInfo();
                        }
                    } else {
                        layui.layer.msg(result.message, {icon: 2});
                        refreshCaptcha();
                    }
                }
            });
            return false;
        }

        $('.bind-password').on('click', bindPassword);
        $('#login-captcha-img').on('click', refreshCaptcha);

        // 进行登录操作
        layui.form.on('submit(login)', submitLogin);
        refreshCaptcha();
    });
</script>
</body>
</html>